<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加成员</title>

<link rel="stylesheet" href="/fission/css/layui.css">
<link rel="stylesheet" href="/css/common.css">

<style>
.layui-transfer-box {
     overflow-y: auto;
}
/*滚动条美化*/
#serviceTransfer ::-webkit-scrollbar {
     width: 4px;
}
/*滚动条中间滑动部分*/
#serviceTransfer ::-webkit-scrollbar-thumb {
     background-color: #ccc;
     border-radius: 3px;
}
.publicSearch_container{
     width: 198px;
     margin-left: 93px;
     display: flex;
     align-items: center;
     border: 1px solid #d9d9d9;
     height: 34px;
     padding: 4px 11px;
     color: rgba(0,0,0,.65);
     font-size: 14px;
     /* border-radius: 4px; */
     box-sizing: border-box;
     background: #fff;
     margin-bottom: 10px;
     justify-content: space-between; 
}
.publicSearch_container input{
     outline: none;
     appearance: none;
     border: none;
     font-size: 14px;
     color: rgba(0,0,0,.65);
     width: 150px;
}
.publicSearch_container i{

}
</style>
</head>
<body>
<!-- 成员选择面板 -->
<div style="padding: 20px;" id="serviceModel">

     <!--<form  method="get" action="" id="Form1">-->
     <div class="publicSearch_container">
          <input type="text" id="etname" name="etname" value="{$etname}" placeholder="请输入名称进行搜索" autocomplete="off">
          <i class="layui-icon layui-icon-search" onclick="search_et()"></i>
     </div>
     <!--</form>-->

     <div class="flex justify-center">
          <div id="serviceTransfer" class="demo-transfer"></div>
     </div>
     <!-- 分页 --> 
     <div style="display: inline-block;margin-top: 11px;min-width: 367px;text-align: center;">
          <div id="serviceTransferPagination" style="display: inline-block;"></div>
     </div>
     <!-- 数据，或者在js中通过ajax动态请求后调用reloadTransfer也可以 -->
     <div id="serviceTransferData" style="display:none;width:0;height:0;overflow:hidden;">{$etList}</div>
     <div style="text-align: right;padding-right: 30px;">
          <button onclick="parent.layer.closeAll()" type="button" class="layui-btn layui-btn-primary">取消</button>
          <button class="layui-btn layui-btn-normal apanel-confirm" lay-submit lay-filter="levelEditForm">保存</button>
     </div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/fission/js/layui.all.js"></script>
<script src="/unpkg/unpkg.vue.js"></script>
<script src="/js/ajax.js"></script>
<script>
function search_et(){
     var etName = $('#etname').val();
     myAjaxPost(false, true, '?etname='+etName, [], function (resp) {
          if (resp.status == 'success') {
               var pdata = resp.data[0];
               for (var i = 0; i < pdata.length;i++) {
                    pdata[i].value = pdata[i].id;
                    pdata[i].title = pdata[i].name;
               }
               // 实例 穿梭框分页
               var thePageSize = 100;
               layui.laypage.render({
                    elem: 'serviceTransferPagination' // 注意，这里的 test1 是 ID，不用加 # 号
                    ,count: pdata ? pdata.length : 0 // 数据总数，一般通过服务端得到
                    ,curr: 1
                    ,limit: thePageSize
                    ,groups: 4
                    ,theme: '#1E9FFF'
                    ,jump: function(obj, first) {
                         // first 是否首次，一般用于初始加载的判断
                         var page = obj.curr
                         var selectedData = layui.transfer.getData('serviceTransfer'); // 当前右侧已选数据，要跟上
                         var curPageData = pdata ? pdata.slice((page - 1) * thePageSize, page * thePageSize) : []
                         curPageData = selectedData.concat(curPageData) // 初始化已选中的值必须在待选列表中
                         //去重复
                         var result = [];
                         var obj = {};
                         for(var i =0; i<curPageData.length; i++){
                              if(!obj[curPageData[i].id]){
                                   result.push(curPageData[i]);
                                   obj[curPageData[i].id] = true;
                              }
                         }
                         // layui 穿梭框初始值（value选项）里传的数据value组成的数组....
                         for (var i = 0, l = selectedData.length; i < l; i++) {
                              selectedData[i] = selectedData[i].value
                         }
                         layui.transfer.reload('serviceTransfer', {
                              data: result
                              ,value: selectedData
                         });
                    }
               });
          }else{
               alert(resp.msg);
          }
     });
}

// Vue控制示例
var app = new Vue({
     el: '#app',
     data: function() {
     return {
     }
},
mounted() {
     init();
     layui.use(['form'], function(){
          layui.form.render();
     })
},
updated:function() {
     // layui悄咪咪的用了Vue的模板引擎，需要重载 以解决radio、checkbox等失效
     layui.use(['form'], function(){
          layui.form.render();
     })
},
     methods: {
     }
})


function init() {
     var $ = $ || layui.$;
     // 选择成员（穿梭框）数据，thePageSize（每页展示数量）根据需要自行配置
     var pdata = null, thePageSize = 100;
     // 实例 成员选择穿梭框
     layui.transfer.render({
          elem: '#serviceTransfer'
          ,id: 'serviceTransfer' // 定义索引
          ,title: ['全部成员', '已选成员']
          ,height: 360
          ,data: null
          ,showSearch: false
          // ,onchange: function(obj, index){
          //   var arr = ['左边', '右边'];
          //   layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
          // }
     })

     // 重载穿梭框数据，比如翻页
     function reloadTransfer(idIndex, data, selectedData) {
          // 可以重载所有基础参数
          layui.transfer.reload(idIndex, {
          data: data
          ,value: selectedData
          });
     }

     window.onload=function()//用window的onload事件，窗体加载完毕的时候
     {
          var type = 'baseInfo1';
          // console.log(type);
          showServiceTransfer(type)
     }
     function showServiceTransfer(type) {
          // type: 哪里触发的，需要区分的话
          if (type === 'baseInfo1') {
               // 实例 穿梭框分页
               layui.laypage.render({
                    elem: 'serviceTransferPagination' // 注意，这里的 test1 是 ID，不用加 # 号
                    ,count: '{$counts}' // 数据总数，一般通过服务端得到
                    ,curr: 1
                    ,limit: thePageSize
                    ,groups: 4
                    ,theme: '#1E9FFF'
                    ,jump: function(obj, first) {
                         // first 是否首次，一般用于初始加载的判断
                         var page = obj.curr
                         var selectedData = layui.transfer.getData('serviceTransfer'); // 当前右侧已选数据，要跟上
                         myAjaxPost(false, true, '', { page,page}, function (resp) {
                              let curPageData = resp.data[0];
                              let curPageDatas = resp.data[1];
                              curPageData = selectedData.concat(curPageData) 
                              var result = [];
                              var obj = {};
                              for(var i =0; i<curPageData.length; i++){
                                   if(!obj[curPageData[i].id]){
                                        result.push(curPageData[i]);
                                        obj[curPageData[i].id] = true;
                                   }
                              }
                              for (var i = 0; i < result.length;i++) {
                                   result[i].value = result[i].id;
                                   result[i].title = result[i].name;
                              }
                               // layui 穿梭框初始值（value选项）里传的数据value组成的数组....
                              for (var i = 0, l = selectedData.length; i < l; i++) {
                                   selectedData[i] = selectedData[i].value
                              }
                              if(selectedData.length){
                                   curPageDatas = selectedData;
                              }
                              reloadTransfer('serviceTransfer', result, curPageDatas)
                         })
                    }
               });
          }
     }

}

     $(".apanel-confirm").on("click",function(){
          parent.$("#selectedUserCon").empty();
          var data = layui.transfer.getData('serviceTransfer'); // 获取已选区域数据
          var html ='';
          var arr = [];
          for (var i = 0; i < data.length; i++) {
               arr.push(data[i].id);
               html += '<div class="service-card">';
               html += '<i class="iconfont icon-person"></i>'+data[i].name;
               html += '</div>';
          }

          parent.$("#selectedhxCon").empty();
          parent.$("#selectedhxCon").html(html);
          parent.$("#selectedhx").val(arr); 
          // parent.$("#selectedhtml").val(html);
          parent.layer.closeAll('iframe');
     })

     $(".layui-btn-primary").on("click",function(){
          parent.layer.closeAll('iframe');
     })
</script>

</body>
</html>